I'm dynamically adding come content to page, let's consider following example:

const dataArray = [
  {id: 1, innerHtml: `Some plain Txt`},
  {id: 2, innerHtml: `Some plain Txt`},
  {id: 3, innerHtml: `Some plain Txt`},
]

And inside component template:

<div *ngFor="let e of dataArray">
 <p [innerHTML]="e.innerHtml"></p>
</div>

All works fine, until I need some nested property binding, like following:

...
  {id: 2, innerHtml = `Some plain Txt with anchor: <a [href]="'most/plain/url/link'" >Link</a>`},
...

I'm passing values via security bypass pipe:

@Pipe({name: 'safeHtml'})
export class Safe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer){}

    transform(style) {
        return this.sanitizer.bypassSecurityTrustHtml(style);
    }
}

But always resulting with: empty href property of a tag when not using security bypass pipe or with non-interpolated, copy-pasted version of it (e.g. <a [href]="'non/interpolated'"></a>)